<template>
  <div class="industry">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/2">店铺行业管理页面</el-menu-item>
      </el-menu>
    </div>

    <el-main>
      <el-form class="firstForm" ref="formRef" :model="form">
        <el-form-item prop="name" class="userId" label="用戶昵称:">
          <el-input class="userInput" v-model="form.name" clearable @clear="onSubmit"></el-input>
        </el-form-item>

        <el-form-item class="btn">
          <el-button class="btnSearch" type="primary" @click="onSubmit">查询</el-button>
          <el-button class="btnReset" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="text">
        <span class="textPeople">推广人数量：5</span>

        <el-row>
          <el-button class="textBtn" type="success" @click="addDialog()">新增行业</el-button>
        </el-row>
      </div>

      <div class="extend">
        <el-table :data="xtableData" style="width: 100%" stripe>
          <el-table-column prop="tradeName" label="行业名称" width="430"> </el-table-column>
          <el-table-column prop="sort" label="排序" width="430"> </el-table-column>
          <el-table-column label="操作" width="430">
            <template slot-scope="scope">
              <!-- 编辑按钮 -->
              <el-button type="primary" icon="el-icon-edit" circle @click="showDialog(scope.row)"></el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" circle @click="removeUserById(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 编辑行业的对话框 -->
      <el-dialog title="编辑行业" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <!-- 内容主体区 -->

        <el-form ref="xtableDataRef" :model="editForm" label-width="70px">
          <el-form-item label="行业名" prop="tradeName">
            <el-input v-model="editForm.tradeName" disabled></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="editForm.sort"></el-input>
          </el-form-item>
        </el-form>

        <!-- 页脚 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editUserInfo(editForm.id)">确定</el-button>
        </span>
      </el-dialog>

      <!-- 新增行业的对话框 -->
      <el-dialog title="新增行业" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
        <!-- 内容主体区 -->

        <el-form ref="xtableDataRefs" :model="addForm" label-width="70px">
          <el-form-item label="行业名" prop="tradeName">
            <el-input v-model="addForm.tradeName"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addForm.sort"></el-input>
          </el-form-item>
        </el-form>

        <!-- 页脚 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUserInfo">确定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'Industry',
  components: {},
  props: {},
  data() {
    return {
      form: {
        name: ''
      },
      // 数据存储
      xtableData: [],
      // 控制编辑行业对话框的显示与隐藏
      editDialogVisible: false,
      // xxtableData: {}
      // 编辑数据框
      editForm: {
        tradeName: '',
        sort: ''
      },
      // 控制新增行业对话框的显示与隐藏
      addDialogVisible: false,
      // 新增数据框
      addForm: {
        tradeName: '',
        sort: ''
      }
    }
  },

  computed: {},

  watch: {},

  created() {
    this.getIndustryList()
  },

  mounted() {},

  methods: {
    // 查询数据
    async onSubmit() {
      this.xtableData = []
      const { data } = await this.$http.get(`/xtableDatas?tradeName_like=${this.form.name}`)
      console.log(data)
      this.xtableData = data
    },
    // 点击重置按钮，重置登录表单
    resetForm() {
      this.$refs.formRef.resetFields()
      this.onSubmit()
    },

    // 获取数据
    async getIndustryList() {
      const data = await this.$http('/xtableDatas')
      console.log(data)
      this.xtableData = data.data
    },

    // 展示编辑行业的对话框
    async showDialog(row) {
      console.log(row)
      this.editForm = row
      this.editDialogVisible = true
    },
    // 监听编辑行业对话框的关闭事件
    editDialogClosed() {
      this.$refs.xtableDataRef.resetFields()
    },
    // 编辑行业信息并提交
    editUserInfo(id) {
      this.$refs.xtableDataRef.validate(async valid => {
        //  发起编辑行业信息的数据请求
        const data = await this.$http.put('/xtableDatas/' + id, this.editForm)
        console.log(data)
      })
      // 关闭对话框
      this.editDialogVisible = false
      // 刷新数据列表
      this.xtableData = []
      this.getIndustryList()
      // 提示修改成功
      this.$message.success('更新行业信息成功！')
    },
    // 根据id删除对应的行业信息
    async removeUserById(row) {
      // 弹框询问行业是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该行业，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果行业确认删除，则返回值为字符串 confirm
      // 如果行业取消删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const data = await this.$http.delete('/xtableDatas/' + row.id)

      if (data.status !== 200) {
        return this.$message.error('删除行业失败！')
      }

      this.$message.success('删除行业成功！')
      // 刷新数据列表
      this.xtableData = []
      this.getIndustryList()
    },

    // 展示新增行业的对话框
    async addDialog() {
      this.addDialogVisible = true
    },
    // 监听新增行业对话框的关闭事件
    addDialogClosed() {
      this.$refs.xtableDataRefs.resetFields()
    },
    // 新增行业信息并提交
    addUserInfo() {
      this.$refs.xtableDataRefs.validate(async valid => {
        //  发起新增行业信息的数据请求
        const data = await this.$http.post('/xtableDatas', this.addForm)
        console.log(data)
      })
      // 关闭对话框
      this.addDialogVisible = false
      // 刷新数据列表
      this.xtableData = []
      this.getIndustryList()
      // 提示修改成功
      this.$message.success('新增行业信息成功！')
    }
  }
}
</script>
<style lang="less" scoped>
.industry {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
  }
  .el-main {
    padding: 0 10px;
    .firstForm {
      position: absolute;
      left: 210px;
      top: 68px;
      width: 85.5%;
      height: 88px;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border: 1px solid rgba(121, 121, 121, 1);
      border-radius: 5px;
      box-shadow: none;
      .userId {
        border-width: 0px;
        position: absolute;
        left: 30px;
        top: 21px;
        // line-height: 75px;
        width: 94px;
        height: 16px;
        font-size: 14px;
        align-self: flex-start;
        padding: 0;
        box-sizing: border-box;

        .userInput {
          border-width: 0px;
          position: absolute;
          left: 109px;
          top: 0px;
          width: 175px;
          height: 25px !important;
          padding: 3px 2px 3px 2px;
          box-sizing: border-box;
        }
      }
      .btn {
        .btnSearch {
          border-width: 0px;
          position: absolute;
          left: 799px;
          top: 24px;
        }
        .btnReset {
          border-width: 0px;
          position: absolute;
          left: 886px;
          top: 24px;
          background-color: #ccc;
        }
      }
    }
    .text {
      position: absolute;
      top: 170px;
      .textPeople {
        margin: 0 60px 0 30px;
      }
      .textBtn {
        border-width: 0px;
        position: absolute;
        left: 965px;
        top: -21px;
        width: 93px;
        height: 40px;
        display: flex;
      }
    }
    .extend {
      padding: 10px;
      margin-top: 170px;
      border: 1px solid rgba(121, 121, 121, 1);
      border-radius: 5px;
      .el-tabs__item {
        width: 210px;
      }
    }
  }
}
</style>
